<template>
  <div class="box" style="height: 100vh">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      style="margin-bottom: 10px"
    />
    <div v-show="cartData.length === 0">
      <van-empty description="购物车无内容">
        <p style="margin-top: 0; margin-bottom: 20px">
          <van-button
            style="display: block; margin: 0 auto; padding: 0 30px"
            round
            type="danger"
            class="bottom-button"
            @click="gohome"
            >立即购物</van-button
          >
        </p>
      </van-empty>
    </div>

    <!-- 加入购物车 -->
    <div>
      <ul>
        <li
          v-for="item in cartData"
          :key="item.cartid"
          style="display: flex; text-align: center"
        >
          <van-checkbox-group v-model="checked" ref="checkboxGroup">
            <van-checkbox
              v-model="item.flag"
              @change="updateOneCart(item.cartid, item.flag)"
              :name="item.proname"
            ></van-checkbox>
          </van-checkbox-group>

          <van-swipe-cell style="flex: 1; position: relative">
            <van-card
              class="goods-card"
              :price="item.originprice"
              :desc="item.proname"
              :thumb="item.img1"
              style="background-color: #f6f6f6"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="delCart(item.cartid)"
              />
            </template>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
              style="position: absolute; bottom: 10px; right: 10px"
              @plus="updateCartNum(item.cartid, item.num++)"
              @minus="updateCartNum(item.cartid, item.num--)"
            />
          </van-swipe-cell>
        </li>
      </ul>
    </div>

    <!-- 推荐商品列表 -->
    <p class="needAdd" style="color: gray; text-align: center; font-size: 20px">
      可能你还想要
    </p>
    <ul
      style="
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-size: 20px;
      "
    >
      <li
        style="width: 50%; margin-bottom: 6px"
        v-for="item in recommendData"
        :key="item.proid"
        @click="goAbout(item.proid)"
      >
        <div>
          <img :src="item.img1" alt="" />
          <p class="p1">{{ item.proname }}</p>
          <p class="p2">￥{{ item.originprice }}</p>
        </div>
      </li>
    </ul>
    <van-submit-bar
      :price="price"
      decimal-length="2"
      button-text="合并"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkAll" style="font-size: 16px; width: 230px"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import {
  recommendList,
  checkCartList,
  updateNum,
  updateOne,
  updateAll,
} from "../service/banner.js";
export default {
  computed: {
    checkAll: {
      get() {
        return this.cartData.every((item) => item.flag);
      },
      set(val) {
        this.cartData.forEach((item) => {
          item.flag = val;
        });
        this.selectAll();
      },
    },
    price() {
      let allPrice = 0;
      this.cartData.forEach((item) => {
        if (item.flag) {
          allPrice += item.originprice * item.num * 100;
        }
      });
      return parseInt(allPrice);
    },
  },
  data() {
    return {
      cartData: [],
      recommendData: [],
      flag: true, // 全选
      show: true, // 显示 空状态
    };
  },
  created() {
    this.recommendListData();
    this.checkCartList();
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    gohome() {
      this.$router.push("/home");
    },
    checkCartList() {
      checkCartList({ userid: this.$store.state.userInfo.data.userid }).then(
        (res) => {
          console.log(res.data.data);
          if (res.data.code === "200") {
            this.cartData = res.data.data;
            this.show = false;
          }
        }
      );
    },
    updateCartNum(cartid, num) {
      updateNum({
        cartid: cartid,
        num: num,
      }).then((res) => {
        console.log(res.data);
      });
    },
    updateOneCart(cartid, flag) {
      // 更新当前商品选中状态
      updateOne({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res.data);
      });
    },
    selectAll() {
      updateAll({
        userid: this.$store.state.userInfo.data.userid,
        type: this.flag,
      }).then((res) => {
        console.log(res.data);
      });
    },
    recommendListData() {
      recommendList().then((res) => {
        // console.log(res.data);
        if (res.data.code === "200") {
          this.recommendData = res.data.data;
          console.log(this.recommendData);
        }
      });
    },
    goAbout(proid) {
      // console.log(proid);
      this.$router.push({ path: "/about", query: { id: proid } });
    },
    onSubmit() {
      console.log("点击提交");
    },
    delCart() {
      console.log("删除");
    },
  },
};
</script>
<style scoped>
/* .box {
  width: 100vw;
} */
.goods-card {
  /* margin: 0; */
  /* background-color: white; */
}
img {
  width: 100%;
}

.delete-button {
  height: 100%;
}
.needAdd {
  font-size: 14px;
  color: gray;
}
p {
  font-size: 16px;
}
.p1 {
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.p2 {
  color: red;
  font-weight: bold;
}
</style>
